<template>
  <div class="order-list">
    <div class="order-item" v-for="(order, i) in orderList" :key="i">
      <!-- 订单头部 -->
      <div class="order-header">
        <van-cell :title="'订单ID：' + order.id ">
          <template #default>
            <van-tag round type="primary">{{ orderStatus(order) }}</van-tag>
            <van-tag round type="danger" v-if="order.status==0" @click="handleOrderCancel(order.id)">取消订单</van-tag>
          </template>
        </van-cell>
        <van-cell title="订单时间" :value="order.createTime"></van-cell>
      </div>

      <!-- 商品列表 -->
      <van-row v-for="item in order.orderItemList" :key="item.id" @click="handle2OrderDetail(order.id)" type="flex"
               align="center">
        <van-col span="6">
          <van-image :src="$fullUrl(item.goodsImg)"></van-image>
        </van-col>
        <van-col span="18">
          <van-cell :title="item.goodsName" :label="item.goodsSpec" class="van-ellipsis">
          </van-cell>
          <van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
            <van-col span="5">{{ item.price }}</van-col>
            <van-col span="4">X</van-col>
            <van-col span="5">{{ item.count }}</van-col>
            <van-col span="3">=</van-col>
            <van-col span="7" style="color:red">¥{{ item.price * item.count }}</van-col>
          </van-row>
        </van-col>
      </van-row>

      <!-- 合计信息 -->
      <div class="amount">
        实付金额：
        <span style="color:red">¥{{ order.amount }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as OrderAPI from "@/api/order.js";

export default {
  name: "orderList",
  data() {
    return {
      orderList: [], //订单列表
    }
  },

  //生命周期钩子函数
  created() {
    this.getOrderList();
  },

  methods: {
    //获取订单列表
    getOrderList() {
      // 参数status == null 为所有状态
      OrderAPI.getMyList(null).then(result => {
        console.log(result); //调式输出
        this.orderList = []; //清空数据
        this.orderList = result.data; //返回数据结构参见API文档
      });
    },

    //订单状态格式转换(0待支付/1已支付/2已发货/3交易成功/-1已取消)
    orderStatus(order) {
      let status = "未知";
      switch (order.status) {
        case 0:
          status = "待支付";
          break;
        case 1:
          status = "已支付";
          break;
        case 2:
          status = "已发货";
          break;
        case 3:
          status = "交易成功";
          break;
        case -1:
          status = "已取消";
          break;
      }
      return status;
    },

    // 取消订单 状态(0待支付/1已支付/2已发货/3交易成功/-1已取消)
    handleOrderCancel(id) {
      OrderAPI.updateStatus(id, -1).then(() => {
        this.getOrderList(); //刷新列表数据
      });
    },


    // 触发导航到订单详情（此时该路由功能还没有实现）
    handle2OrderDetail(id) {
      this.$router.push({
        name: "orderDetail",
        params: {
          id
        }
      });
    },

  },

}
</script>

<style lang="less" scoped="scoped">
.order-list {
  background-color: white;
}

.order-item {
  font-size: 12px;

  .order-header {
    font-weight: bold;
  }

  .van-row {
    padding: 10px 20px;
  }
}

.amount {
  padding: 5px 15px;
  text-align: right;
  font-weight: bold;
  background-color: lightgrey;
  font-size: 18px;
}
</style>
